<!-- user表单弹窗 -->
<form id="user-form" lay-filter="user-form" class="layui-form model-form">
    <input name="id" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
            <input name="username" placeholder="请输入账号" type="text" class="layui-input" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input name="nickname" placeholder="请输入用户名" type="text" class="layui-input" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input name="mobile" placeholder="请输入手机号" type="text" class="layui-input" lay-verify="required|mobile"
                   required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="0" title="男" checked/>
            <input type="radio" name="sex" value="1" title="女"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block">
            <select name="roleId" xm-select="roleId">
            </select>
        </div>
    </div>
    <div class="layui-form-item model-form-footer">
        <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
        <button class="layui-btn" lay-filter="user-form-submit" lay-submit>保存</button>
    </div>
</form>

<script>
layui.use(['layer', 'admin', 'form', 'formSelects'], function () {
    var layer = layui.layer;
    var admin = layui.admin;
    var form = layui.form;
    var formSelects = layui.formSelects;
    
    form.render('radio');

    // 获取所有角色
    layer.load(2);
    admin.req('api-user/allRoles', {}, function (data) {
        layer.closeAll('loading');
        if (0 == data.resp_code) {
            // 渲染多选下拉框
            var roleSelectData = new Array();
            for (var i = 0; i < data.datas.length; i++) {
                roleSelectData.push({name: data.datas[i].name, value: data.datas[i].id});
            }
            formSelects.data('roleId', 'local', {arr: roleSelectData});

            // 回显user数据
            var user = admin.getTempData('t_user');
            console.log(user);
            $('#user-form').attr('method', 'POST');
            if (user) {
                form.val('user-form', user);
                $('#user-form').attr('method', 'POST');
                var rds = new Array();
                for (var i = 0; i < user.roles.length; i++) {
                    rds.push(user.roles[i].id);
                }
                formSelects.value('roleId', rds);
            }
        } else {
            layer.msg('获取角色失败', {icon: 2, time: 500});
        }
    }, 'GET');
    
    // 表单提交事件
    form.on('submit(user-form-submit)', function (data) {
        layer.load(2);
        admin.req('api-user/users/saveOrUpdate', JSON.stringify(data.field), function (data) {
            layer.closeAll('loading');
            if (data.resp_code == 0) {
                layer.msg(data.resp_msg, {icon: 1, time: 500});
                admin.finishPopupCenter();
            } else {
                layer.msg(data.resp_msg, {icon: 2, time: 500});
            }
        }, "POST");
        return false;
    });
});
</script>